<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>导航栏 Navbar --JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <h1>简易的导航栏 Simple navbar</h1>
  <div class="desc">
    <div>Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部</div></div>
  <div class="desc"><div>导航栏的代码为一个ul列表，被一个容器包裹，这个容器需要有data-role="navbar"属性。要设定某一个链接为活动（selected）状态，给链接增加class="ui-btn-active" 即可。我们给尾部栏设置了一个导航栏，把one项设置为活动状态</div></div>
  <div class="code"> 
    <p>&lt;div data-role=&quot;footer&quot;&gt;<br /> 
    　
&lt;div data-role=&quot;navbar&quot;&gt;<br /> 
　　
&lt;ul&gt;<br /> 
　　　
&lt;li&gt;&lt;a href=&quot;a.html&quot; class=&quot;ui-btn-active&quot;&gt;One&lt;/a&gt;&lt;/li&gt;<br /> 
　　　
&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;<br /> 
　　
&lt;/ul&gt;<br /> 
　
&lt;/div&gt;&lt;!-- /navbar --&gt;<br />
&lt;/div&gt;&lt;!-- /footer --&gt;</p>
</div>
  <div class="desc"><div>尾部工具栏默认下应用的主题样式为"a"(黑色)，但是你可以很轻松的设置主题样式</div></div>
<div class="desc">
  <div>导航栏内每项的宽度都被设定为相同的，所以按钮的宽度为浏览器宽度 1/2.新增加一项的话，每项的宽度自动匹配为1/3,以此类推。如果导航栏多于5项，导航栏自动表现为多行</div></div>
<p class="indent"><strong>两个按钮的导航栏</strong></p>
<IMG src="../../images/Navbar_1.png" tppabs="http://www.jqmapi.com/images/Navbar_1.png">

<p class="indent"><strong>三个按钮的导航栏</strong></p>
<IMG src="../../images/Navbar_2.png" tppabs="http://www.jqmapi.com/images/Navbar_2.png">


<p class="indent"><strong>五个按钮的导航栏</strong></p>
<IMG src="../../images/Header bars_6.png" tppabs="http://www.jqmapi.com/images/Header%20bars_6.png">

<p class="indent"><strong>多余5项的导航</strong></p>
<IMG src="../../images/Header bars_5.png" tppabs="http://www.jqmapi.com/images/Header%20bars_5.png">





 <h1>头部的导航栏 Navbars in headers</h1>
  <div class="desc"><div>如果要给页面头部增加一个导航栏，你也可以保留头部栏的页面标题和按钮。只需要把导航栏容器放进头部栏容器内</div></div>
<p class="indent"><strong>头部的导航栏</strong></p>
<img src="../../images/Navbar_4.png" tppabs="http://www.jqmapi.com/images/Navbar_4.png">


 <h1>导航栏的图标 Icons in navbars</h1>
  <div class="desc"><div>给导航栏的列表项链接增加data-icon属性，可以给链接设置一个标准的移动网站的图标。给列表项链接增加data-iconpos="top"属性，可以给链接的图标设置位置为在文字上方</div></div>
<p class="indent"><strong>导航栏的图标</strong></p>
<img src="../../images/Navbar_5.png" tppabs="http://www.jqmapi.com/images/Navbar_5.png">



 <h1>使用第三方的图标?Using 3rd party icon sets</h1>
  <div class="desc"><div>你可以可以把任何你喜欢的第三方的icon组库加入到自己的项目中。只需要在css中自定义icon的地址和位置就可以了。下面一个实例为使用了Glyphish icon组的导航栏</div></div>
<p class="indent"><strong>导航栏的图标</strong></p>
<img src="../../images/Navbar_6.png" tppabs="http://www.jqmapi.com/images/Navbar_6.png" />
  <div class="desc"><div>Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.</div></div>


 <h1>给导航栏主题样式 Theming navbars</h1>
  <div class="desc"><div>给导航栏设置data-theme属性，，可以给导航栏设置主题样式<br />
  </div></div>
<p class="indent"><strong>导航栏的主题</strong></p>
<img src="../../images/Navbar_7.png" tppabs="http://www.jqmapi.com/images/Navbar_7.png" /></div>
</div>
<iframe  id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



